<template>
	<view class="uiwu">
		<view class="uiwu-goods uiwu-flex-space">
			<image :src="goodsInfo.img" mode="aspectFill"></image>
			<view class="name">{{goodsInfo.name}}</view>
			<view class="num">x1</view>
		</view>
		<view class="uiwu-box">
			<view class="title">售后原因</view>
			<textarea v-model="fromData.refund_reason" placeholder="请描述申请售后的具体原因，100字以内"></textarea>
			<view class="title uiwu-flex-space">上传凭证<text>（选填，可上传多张）</text></view>
			<view class="list uiwu-flex">
				<uiwu-button-update v-for="(item,index) in fromData.refund_proof" :key="index" @change="changeImage1($event,index)">
					<view class="uiwu-update uiwu-flex-center">
						<image :src="item" mode="aspectFill" style="width: 160rpx;height: 160rpx;"></image>
					</view>
				</uiwu-button-update>
				<uiwu-button-update @change="changeImage">
					<view class="uiwu-update uiwu-flex-center">
						<image src="/static/xiangji.png" mode="widthFix"></image>
					</view>
				</uiwu-button-update>
			</view>
		</view>
		<uiwu-footer>
			<view class="uiwu-footer">
				<text class="uiwu-flex-center" @tap="submit(fromData)">提交申请</text>
			</view>
		</uiwu-footer>
	</view>
</template>

<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app';
	import { prizeRefund } from '@/api/prize';
	import { ref } from 'vue';
	import { uiwu } from '@/config/config';
	import { integralRefund } from '@/api/api';
	const goodsInfo = ref<object>({})
	const fromData = ref({
		refund_proof:[],
		refund_reason:'',
		id:''
	})
	const submit = async (e) : Promise<any> => {
		if(!e.refund_reason) return uiwu.toast('请填写售后理由')
		const data = goodsInfo.value.type == 1 ? await integralRefund(e) :  await prizeRefund(e)
		if(!data) return 
		uiwu.toast('申请成功')
		uiwu.openWindow('./list','close')
	}
	const changeImage = ({data:{url}}) => {
		fromData.value.refund_proof.push(url)
	}
	const changeImage1 = ({data:{url}},index:number)=>{
		fromData.value.refund_proof[index] = url
	}
	onLoad(({goods})=>{
		goodsInfo.value = JSON.parse(goods)
		fromData.value.id = JSON.parse(goods).id
		console.log(goods);
	})
</script>

<style lang="scss">
	page{
		background-color: #e6e6e6;
	}
	.uiwu{
		padding: 1rpx 24rpx 0;
	}
	.uiwu-goods{
		width: 100%;
		height: 168rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 20rpx auto;
		padding: 0 18rpx;
		image{
			width: 120rpx;
			height: 120rpx;
			border-radius: 16rpx;
		}
		.name{
			font-size: 28rpx;
			font-weight: bold;
			color: #444444;
			flex: 1;
			padding: 0 24rpx;
		}
		.num{
			font-size: 28rpx;
			font-weight: 400;
			color: #444444;
		}
	}
	.uiwu-box{
		width: 100%;
		background-color: #fff;
		padding: 32rpx;
		.title{
			font-size: 28rpx;
			font-weight: bold;
			color: #231815;
			margin-bottom: 20rpx;
			text{
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
			}
		}
		textarea{
			padding: 24rpx;
			font-size: 28rpx;
			box-sizing: border-box;
			width: 100%;
			height: 200rpx;
			background: #F9F9F9;
			border-radius: 8rpx 8px 8px 8px;
			margin-bottom: 30rpx;
		}
		.list{
			.uiwu-update{
				width: 160rpx;
				height: 160rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				border: 2rpx solid #E6E6E6;
				margin:0 5rpx;
				overflow: hidden;
				image{
					width: 64rpx;
				}
			}
		}
	}
	.uiwu-footer{
		padding: 5rpx 32rpx;
		width: 100%;
		text{
			width: 100%;
			height: 80rpx;
			background: #EF821E;
			border-radius: 40rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #FFFFFF;
		}
	}
</style>
